<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
.wrap{
    width: 880px;
    margin: 50px auto 0;
}
.header{
    overflow: hidden;
    border-top: 2px solid #06A86E;
}
.header h3{
    float: left;
    line-height: 40px;
    text-align: center;
    background-color: #eee;
    color: #666;
    font-size: 18px;
    width: 220px;
}
.content{
    padding: 10px 0;
}
.content div{
    overflow: hidden;
    display: none;
}
.content div img{
    width: 200px;
    height: 260px;
    float: left;
    margin: 0 10px;
}

.header h3.active{
    color: #fff;
    background-color: #06A86E;
}
.content div.show{
    display: block;
}
</style>
</head>
<body>

<div class="wrap tab1">
    <div class="header">
        <h3>喜剧</h3>
        <h3>爱情</h3>
        <h3>科幻</h3>
        <h3>动作</h3>
    </div>
    <div class="content">
        <div>
            <img src="./img/e1.png" alt="">
            <img src="./img/e1.png" alt="">
            <img src="./img/e1.png" alt="">
            <img src="./img/e1.png" alt="">
        </div>
        <div>
            <img src="./img/e2.png" alt="">
            <img src="./img/e2.png" alt="">
            <img src="./img/e2.png" alt="">
            <img src="./img/e2.png" alt="">
        </div>
        <div>
            <img src="./img/e3.png" alt="">
            <img src="./img/e3.png" alt="">
            <img src="./img/e3.png" alt="">
            <img src="./img/e3.png" alt="">
        </div>
        <div>
            <img src="./img/e4.png" alt="">
            <img src="./img/e4.png" alt="">
            <img src="./img/e4.png" alt="">
            <img src="./img/e4.png" alt="">
        </div>
    </div>
</div>
<div class="wrap tab2">
    <div class="header">
        <h3>喜剧</h3>
        <h3>爱情</h3>
        <h3>科幻</h3>
        <h3>动作</h3>
    </div>
    <div class="content">
        <div>
            <img src="./img/e1.png" alt="">
            <img src="./img/e1.png" alt="">
            <img src="./img/e1.png" alt="">
            <img src="./img/e1.png" alt="">
        </div>
        <div>
            <img src="./img/e2.png" alt="">
            <img src="./img/e2.png" alt="">
            <img src="./img/e2.png" alt="">
            <img src="./img/e2.png" alt="">
        </div>
        <div>
            <img src="./img/e3.png" alt="">
            <img src="./img/e3.png" alt="">
            <img src="./img/e3.png" alt="">
            <img src="./img/e3.png" alt="">
        </div>
        <div>
            <img src="./img/e4.png" alt="">
            <img src="./img/e4.png" alt="">
            <img src="./img/e4.png" alt="">
            <img src="./img/e4.png" alt="">
        </div>
    </div>
</div>

<script>
// 面向对象改造
// 1.定义构造函数(首字母大写)
/* function Tab(){
    // this -> 实例对象
    // 2.将变量变成对象的属性
    this.titles = document.querySelectorAll('.header h3')
    this.shows = document.querySelectorAll('.content div')
    this.curIndex = 0// 记录当前显示选项的下标
}
// 3.将函数变成对象的方法
Tab.prototype.bindEvent = function (){// 添加事件
    // this -> 实例对象
    var _this = this
    for (var i = 0; i < this.titles.length; i++){
        this.titles[i].index = i
        this.titles[i].onclick = function (){
            // this -> 点击的h3
            // 清除当显示选项的类名
            _this.titles[_this.curIndex].className = ''
            _this.shows[_this.curIndex].className = ''
            // 给当前点击的选项添加类名
            _this.titles[this.index].className = 'active'
            _this.shows[this.index].className = 'show'
            // 更新当前显示选项的下标
            _this.curIndex = this.index
        }
    }
}
// 4.实例化
// new Tab().bindEvent()
var tab = new Tab()
tab.bindEvent() */
// 问题：无法复用


/* function Tab(titles,shows){
    this.titles = titles
    this.shows = shows
    this.curIndex = 0
}
Tab.prototype.bindEvent = function (){
    // this -> 实例对象
    var _this = this
    for (var i = 0; i < this.titles.length; i++){
        this.titles[i].index = i
        this.titles[i].onclick = function (){
            // this -> 点击的h3
            // 清除当显示选项的类名
            _this.titles[_this.curIndex].className = ''
            _this.shows[_this.curIndex].className = ''
            // 给当前点击的选项添加类名
            _this.titles[this.index].className = 'active'
            _this.shows[this.index].className = 'show'
            // 更新当前显示选项的下标
            _this.curIndex = this.index
        }
    }
}
var tits1 = document.querySelectorAll('.tab1 .header h3')
var cons1 = document.querySelectorAll('.tab1 .content div')
var tab1 = new Tab(tits1,cons1)
tab1.bindEvent()

var tits2 = document.querySelectorAll('.tab2 .header h3')
var cons2 = document.querySelectorAll('.tab2 .content div')
var tab2 = new Tab(tits2,cons2)
tab2.bindEvent() */
// 问题：使用麻烦，不灵活，不方便扩展

// 程序要避免过度设计
// 开闭原则（开放扩展，关闭修改）
// 单一职责原则

// $('.box')  jQuery('.box') => jQuery实例对象

// 模块化（独立的作用域）
;(function (){
    function Tab(options){
        // 初始化
        this.init(options)
    }
    // Tab.prototype = {
    //     constructor: Tab,
    //     init: function (){},
    //     getElement: function (){},
    //     // ...
    // }
    // 初始化方法（处理传入的参数）
    Tab.prototype.init = function (options){
        // 根据传入的选择器获取元素
        this.titles = this.getElement(options.tits)
        this.shows = this.getElement(options.cons)
        // 初始化当前显示选项的下标
        this.curIndex = options.index || 0
        // 初始化默认当前显示的选项
        this.setClass(this.titles[this.curIndex],'active')
        this.setClass(this.shows[this.curIndex],'show')
        // 添加事件
        this.bindEvent()
    }
    // 获取元素的方法
    Tab.prototype.getElement = function (selector){
        return document.querySelectorAll(selector)
    }
    // 设置类名的方法
    Tab.prototype.setClass = function (dom,oClass){
        dom.className = oClass
    }
    // 获取当前显示选项的下标
    Tab.prototype.getIndex = function (){
        return this.curIndex
    }
    // 添加事件的方法
    Tab.prototype.bindEvent = function (){
        // this -> 实例对象
        // var _this = this
        for (var i = 0; i < this.titles.length; i++){
            // this.titles[i].index = i
            this.titles[i].onclick = function (index){
                // this -> 实例对象
                // index -> 当前点击元素的下标
                // 清除当显示选项的类名
                this.setClass(this.titles[this.curIndex],'')
                this.setClass(this.shows[this.curIndex],'')
                // 给当前点击的选项添加类名
                this.setClass(this.titles[index],'active')
                this.setClass(this.shows[index],'show')
                // 更新当前显示选项的下标
                this.curIndex = index
            }.bind(this,i)//改变this指向并传入下标
        }
    }
    // 工厂函数（返回实例对象）
    var factory = function (options){
        return new Tab(options)
    }
    // 对外暴露接口
    window.tab = factory
})();

// 作为用户去使用
var tab1 = tab({
    tits: '.tab1 .header h3',
    cons: '.tab1 .content div',
    index: 1 // 可选，初始显示选项下标
})
// console.log( tab1.getIndex() )
// var boxs = tab1.getElement('.box')

tab({
    tits: '.tab2 .header h3',
    cons: '.tab2 .content div',
    // index: 3 // 可选，初始显示选项下标
})

</script>
</body>
</html>